import React from 'react';
import {Card,Table, Modal, Button, message,Spin} from 'antd';
// import axios from 'axios';
import Utils from '../../utils/utils'
import axios from '../../axios/index'
class BaseTable extends React.Component{
    state={
        dataSource:[],
        dataSource2:[],
        pagination:{},
        loading:true
    }
    params={
        page:1
    }
    componentDidMount(){
        const data = [
            {
                id:'0',
                userName:'Jack',
                sex:'1',
                state:'1',
                interest:'2',
                birthday:'2000-01-01',
                address:'北京市海淀区奥林匹克公园',
                time:'09:00'
            },
            {
                id: '1',
                userName: 'Tom',
                sex: '1',
                state: '3',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
            {
                id: '2',
                userName: 'Lily',
                sex: '1',
                state: '2',
                interest: '1',
                birthday: '2000-01-01',
                address: '北京市海淀区奥林匹克公园',
                time: '09:00'
            },
        ]
        data.map((item,index)=>{
            item.key = index;
        })
        this.setState({
            dataSource: data
        })
        this.requstList()
    }
    // requstList = ()=>{
    //     axios({
    //         url:"http://127.0.0.1:7300/mock/5ea299c3cfc5a02d0c8b4c48/cycle/table/list",
    //         method:"get",
    //         params:this.params
    //     }).then((response)=>{
    //         console.log(response)
    //         const data = response.data;
    //         const list = data.result.list;
    //         // const pagination = {
    //         //     onChange:(current)=>{
    //         //         this.params.page = current;
    //         //         this.requstList()
    //         //     },
    //         //     current : data.result.page,
    //         //     pageSize:data.result.page_size,
    //         //     total:data.result.total_count,
    //         //     showQuickJumper:true,
    //         //     showTotal:()=>{
    //         //         return `一共${data.result.total_count}条`
    //         //     }
    //         // }
    //         const pagination = Utils.pagination(data,(current)=>{
    //             this.params.page = current;
    //             this.requstList()
    //         })
    //         this.setState({
    //             dataSource2:list,
    //             pagination
    //         })
    //     })
    // }
    requstList = ()=>{
        axios.ajax({
            url:"/table/list",
            data:{
                params:this.params
            }
        }).then((response)=>{
            // const list = response.result.list;
            let list = response.result.list.map((item,index)=>{
                item.key = index
                return item
            })
            const pagination = Utils.pagination(response,(current)=>{
                this.params.page = current;
                this.requstList()
            })
            this.setState({
                dataSource2:list,
                pagination,
                loading:false
            })
        })
    }
    onRowClick = (record,index)=>{
        let selectKey = [index]
        Modal.info({
            title:'信息',
            content:`用户名:${record.userName},用户爱好:${record.interest}`
        })
        this.setState({
            selectedRowKeys:selectKey,
            selectedItem:record
        })
    }
    handelDelete = ()=>{
        let rows = this.state.selectedRows;
        let ids = []
        rows.map((item)=>{
            ids.push(item.id)
        })
        
        Modal.confirm({
            title:'删除提示',
            content:`你确定要删除这些数据嘛?${ids.join(',')}`,
            onOk:()=>{
                message.success('删除成功')
                this.requstList()
                this.setState({
                    selectedRowKeys: []
                });
            }
        })
    }
    render(){
    const columns = [
        {
            title:'id',
            key:'id',
            dataIndex:'id'
        },
        {
            title: '用户名',
            key: 'userName',
            dataIndex: 'userName'
        },
        {
            title: '性别',
            key: 'sex',
            dataIndex: 'sex',
            render(sex){
                return sex ==1 ?'男':'女'
            }
        },
        {
            title: '状态',
            key: 'state',
            dataIndex: 'state',
            render(state){
                let config  = {
                    '1':'咸鱼一条',
                    '2':'风华浪子',
                    '3':'北大才子',
                    '4':'百度FE',
                    '5':'创业者'
                }
                return config[state];
            }
        },
        {
            title: '爱好',
            key: 'interest',
            dataIndex: 'interest',
            render(abc) {
                let config = {
                    '1': '游泳',
                    '2': '打篮球',
                    '3': '踢足球',
                    '4': '跑步',
                    '5': '爬山',
                    '6': '骑行',
                    '7': '桌球',
                    '8': '麦霸'
                }
                return config[abc];
            }
        },
        {
            title: '生日',
            key: 'birthday',
            dataIndex: 'birthday'
        },
        {
            title: '地址',
            key: 'address',
            dataIndex: 'address'
        },
        {
            title: '早起时间',
            key: 'time',
            dataIndex: 'time'
        }
    ]
    const {dataSource2,pagination} = this.state
    const {selectedRowKeys,selectedRows} = this.state
    const rowSelection = {
        type:'radio',
        onChange:(selectedRowKeys,selectedRows)=>{
            console.log(selectedRowKeys,selectedRows)
        }
    }
    const rowCheckedSelection = {
        type:'checkbox',
        selectedRowKeys,
        onChange:(selectedRowKeys,selectedRows)=>{
            this.setState({
                selectedRowKeys,
                selectedRows
            })
        }
    }
    return(
      <div style={{width:"100%"}}>
       <Card title="基础表格">
           <Table 
               bordered
               columns={columns}
               dataSource={this.state.dataSource}
               pagination={false}
           />
       </Card>
       <Card title="后台数据表格">
        <Spin spinning={this.state.loading}>
            <Table 
                bordered
                columns={columns}
                dataSource={dataSource2}
                pagination={pagination}
            />
        </Spin>
       </Card>
       <Card title="单选框数据表格">
        <Spin spinning={this.state.loading}>
           <Table 
               bordered
               rowSelection={rowSelection}
               onRow={(record,index)=>{
                    return {
                        onClick:()=>{
                            this.onRowClick(record,index)
                        }
                    }
               }}
               columns={columns}
               dataSource={dataSource2}
               pagination={false}
           />
        </Spin>
       </Card>
       <Card title="多选框数据表格">
            <div style={{marginBottom:10}}></div>
                <Button onClick={this.handelDelete}>删除</Button>
            <Table 
               bordered
               rowSelection={rowCheckedSelection}
               onRow={(record,index)=>{
                    return {
                        onClick:()=>{
                            this.onRowClick(record,index)
                        }
                    }
               }}
               columns={columns}
               dataSource={dataSource2}
               pagination={false}
            />
       </Card>
      </div>
    )
  }
}


export default BaseTable;
